<template>
  <el-col>
    <el-menu
      default-active="0"
      class="el-menu-vertical-demo"
      background-color="transparent"
      text-color="#fff"
      active-text-color="#20a0d7"
      style="border: none">

      <div v-for="(item, index) in asideNav">

        <!-- 这个是没有子菜单的, 一级导航 -->
        <el-menu-item :index="index.toString()" v-if="!item.children"  @click="moveToRouter(item)">
          <i class="el-icon-menu"></i>
          <span slot="title">{{item.title}}</span>
        </el-menu-item>

        <!-- 这个是有子菜单的, 二级导航 -->
        <el-submenu :index="index.toString()" v-if="item.children">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{item.title}}</span>
          </template>
          <el-menu-item-group v-for="(childrenItem, childrenIndex) in item.children">
            <el-menu-item @click="moveToRouter(childrenItem)" :index="index + '-' + childrenIndex">{{childrenItem.title}}</el-menu-item>
          </el-menu-item-group>

          <!--三级导航-->
          <!--<el-submenu index="1-4">-->
            <!--<template slot="title">选项4</template>-->
            <!--<el-menu-item index="1-4-1">选项1</el-menu-item>-->
          <!--</el-submenu>-->

        </el-submenu>

      </div>

    </el-menu>
  </el-col>
</template>

<script>

export default {
  data () {
    return {
      asideNav: [
        {
          title: '首页管理',
          permission: '首页管理',
          src: '/home/index'
        },
        {
          title: '用户管理',
          permission: '用户管理',
          children: [
            {
              title: '用户列表',
              key: '用户列表',
              src: '/home/wallUser'
            }
          ]
        }
      ],

      // 背景色
      backgroundColor: '#324157',
      // 文字颜色
      textColor: '#bfcbd9',
      // 激活文字颜色
      activeTextColor: '#20a0ff',
      // 是否只保持一个子菜单的展开
      uniqueOpened: true
    }
  },
  created: function () {

  },
  mounted: function () {

  },
  methods: {
    // 跳转相应路由
    moveToRouter (val, index) {
      console.log(val)
      if (typeof (val) !== 'object') {
        console.warn('点击必须是个对象')
        return
      }
      let routerSrc = val.src
      this.$router.push({path: routerSrc})
    }
  },
  watch: {}
}
</script>

<style lang='scss' scoped type="text/css">
</style>
